<template>
	<view>
		<view class="m-top">
			<navigator class="m-top-nav" url="/pages/plat_menu/index" open-type="switchTab"></navigator>
			<view class="m-top-text">美食</view>
			<navigator class="input-wrap" url="/pages/shop_new/search/search"><input type="text" value="" placeholder="冷面 麻辣烫" /></navigator>
		</view>
		<view class="m-info-bg">
			<view class="m-today-wrap" v-if="taocanList.length">
				<view class="m-today-top">
					<view class="m-today-top-text">今日套餐推荐</view>
					<view class="m-today-top-more" @click="taocanAllFn">
						<text class="m-today-top-more-number">{{ taocanList.length }}个</text>
						&gt;
					</view>
				</view>
				<view class="m-today-info">
					<view class="m-today-item" v-for="(item,index) in taocanList" :key="index">
						<image class="m-today-item-img" :src="item.goods[0]['image']"></image>
						<view class="m-today-item-info">
							<view class="m-today-item-text">{{ item.name }}</view>
							<view class="m-today-item-store">{{ item.store_name }}</view>
							<view class="m-today-item-price-wrap">
								<view class="m-today-item-price">
									<view class="m-today-item-price-new">
										<span>￥</span>
										<span>{{item.price}}</span>
									</view>
									<view class="m-today-item-price-old" v-if="item.old_price > item.price">
										<span>￥</span>
										<span>{{item.old_price}}</span>
									</view>
								</view>
								<view class="m-today-item-btn" @click="toTaocanDetail(item['goods'][0])">购买</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="m-nav-wrap">
				<view class="m-nav-item" @click="navShowAllFn" v-if="!isShowAll">
					<image class="m-nav-img" src="./icon-all.png"></image>
					<view class="m-nav-text">全部</view>
				</view>
				<navigator class="m-nav-item" v-for="(item, index) in subNavList" :key="index" :url="'../shopType/shopType?cat_url=' + item.cat_url">
					<image class="m-nav-img" :src="item.pic"></image>
					<view class="m-nav-text">{{ item.cat_name }}</view>
				</navigator>
			</view>
			<view class="m-bottom-list">
				<view class="m-t-list-sort">
					<view @click="showFilterMaskFn(0)" :class="'m-t-list-sort-item m-t-list-sort-item-bg ' + (nav_0 ? 'active' : '')">综合排序</view>
					<view @click="sortByDistance" :class="'m-t-list-sort-item ' + (nav_1 ? 'active' : '')">速度</view>
					<!-- <view @click="sortByDeliveryTime"
					:class="'m-t-list-sort-item '+ (nav_2?'active':'')">配送时间</view> -->
					<view @click="showFilterMaskFn(3)" :class="'m-t-list-sort-item m-t-list-sort-item-bg ' + (nav_3 ? 'active' : '')">全部筛选</view>

					<view class="m-filter-mask" v-if="showFilterMask">
						<view class="m-t-list-sort m-t-mask-sort">
							<view :class="'m-t-list-sort-item m-t-list-sort-item-bg' + (mZhongHe ? ' active m-t-list-sort-item-bg-reverse' : '')">综合排序</view>
							<view class="m-t-list-sort-item">速度</view>
							<!-- <view class="m-t-list-sort-item">配送时间</view> -->
							<view :class="'m-t-list-sort-item m-t-list-sort-item-bg' + (mZhongHe ? '' : ' active m-t-list-sort-item-bg-reverse')">活动筛选</view>
						</view>
						<view class="m-t-mask-sort-zonghe" v-if="mZhongHe">
							<view @click="sortByScore" class="m-t-mask-sort-zonghe-item">评分最高</view>
							<view @click="sortBySale" class="m-t-mask-sort-zonghe-item">销售最高</view>
						</view>
						<view class="m-t-mask-sort-activity" v-else>
							<!-- <view class="m-t-mask-sort-activity-item">满减优惠</view>
							<view class="m-t-mask-sort-activity-item">首单立减</view>
							<view class="m-t-mask-sort-activity-item">进店领券</view>
							<view class="m-t-mask-sort-activity-item">免费配送</view>
							<view class="m-t-mask-sort-activity-item">折扣商品</view> -->
							<view @click="filterByDeliveryType" class="m-t-mask-sort-activity-item">兔兔叮配送</view>
							<!-- <view @click="filterByDeliveryFree" class="m-t-mask-sort-activity-item">免费配送</view> -->
						</view>
					</view>
				</view>
				<view class="m-t-list-list">
					<view v-if="!nearByData.length" class="m-t-list-empty">暂无数据</view>
					<navigator v-else class="m-t-list-item" v-for="(item, index) in nearByData" :key="index" :url="'../takeout-sub/takeout-sub?store_id=' + item.store_id">
						<view class="m-t-list-item-pic"><image mode="aspectFill" :src="item.image"></image></view>
						<view class="m-t-list-item-info">
							<view class="m-t-list-item-title">{{ item.name }}</view>
							<view class="m-t-list-item-one">
								<view class="m-t-list-item-one-left">
									<text class="m-t-list-item-one-score">{{ item.star }}分</text>
									<text>月售{{ item.month_sale_count }}</text>
								</view>
								<view class="m-t-list-item-one-right">
									<text class="m-t-list-item-one-time">{{ item.delivery_time }}分钟</text>
									<text>{{ item.range }}</text>
								</view>
							</view>
							<view class="m-t-list-item-two">
								<text>起送{{ item.delivery_price }} |</text>
								<text>配送{{ item.delivery_money }}</text>
								<!-- <text>人均￥27</text> -->
							</view>
							<view class="m-t-list-item-three">
								<text>{{ item.deliver_name }}</text>
								<!-- <text>水煮鱼不错，很好吃</text> -->
							</view>
							<view class="m-t-list-item-four" v-for="(subitem, idx) in item.coupon_list" :key="idx">
								<text>{{ subitem.text }}</text>
							</view>
						</view>
					</navigator>
				</view>
			</view>
		</view>
		<navigator class="m-t-fix-car" url="/pages/shop_new/cart/cart"><image src="../take-out/imgs/car.png" mode=""></image></navigator>
	</view>
</template>

<script>
import common from '../../../utils/common.js'
export default {
	data() {
		return {
			taocanList:[],
			delivery_address: '',
			isShowAll: false,
			subNavListAll: [],
			subNavList: [],
			nearByData: [],
			mZhongHe: true,
			showFilterMask: false,
			nav_0: true,
			nav_1: true,
			nav_2: true,
			nav_3: true
		}
	},
	onLoad(options) {
		const { cat_id, cat_url } = options
		this.getTakeoutSecTypesByFid(cat_id)
		this.getShopList(cat_url)
		this.getTaocan()
	},
	mounted() {},
	methods: {
		taocanAllFn(){
			console.log('tc')
			uni.navigateTo({
			    url: './taocan'
			});
		},
		toTaocanDetail(item){
			const { store_id,goods_id } = item
			// console.log(store_id,goods_id)
			const url = `./taocanDetail?store_id=${store_id}&product_id=${goods_id}`
			uni.navigateTo({
			    url: url
			});
		},
		getTaocan(){
			var param = {}
			common.post('Shop_new&a=mTaocan', param, data => {
				// console.log('套餐', data)
				if(data.length){
					this.taocanList = data.slice(0,8)
				}
			})
		},
		getShopList(cat_url) {
			var param = {
				cat_url
			}
			common.post('Shop_new&a=ajax_list', param, data => {
				console.log('店铺列表', data)
				this.nearByData = data.store_list
			})
		},
		navShowAllFn() {
			this.isShowAll = true
			this.subNavList = this.subNavListAll
		},
		getTakeoutSecTypesByFid(cat_id) {
			var param = {
				cat_id
			}
			common.post('Shop_new&a=mTakeoutSecTypesByFid', param, data => {
				this.subNavListAll = data
				this.subNavList = data.slice(0, 4)
			})
		},
		filterByDeliveryType() {
			// 兔兔叮配送
			let data = this.nearByData
			data = data.filter(item => item.deliver_name === '兔兔叮配送')
			this.nav_0 = false
			this.nav_1 = false
			this.nav_2 = false
			this.nav_3 = true
			this.showFilterMask = false
			this.nearByData = data
		},
		filterByDeliveryFree() {
			// 免费配送
			let data = this.nearByData
			data = data.filter(item => item.deliver_discount.type === 'deliver_free')
			this.nav_0 = false
			this.nav_1 = false
			this.nav_2 = false
			this.nav_3 = true
			this.showFilterMask = false
			this.nearByData = data
		},
		sortBySale() {
			// 销量最高
			let data = this.nearByData
			data = data.sort(function(a, b) {
				return parseFloat(a.month_sale_count) - parseFloat(b.month_sale_count)
			})
			this.nav_0 = true
			this.nav_1 = false
			this.nav_2 = false
			this.nav_3 = false
			this.showFilterMask = false
			this.nearByData = data
		},
		sortByScore() {
			// 评分最高
			let data = this.nearByData
			data = data.sort(function(a, b) {
				return parseFloat(a.star) - parseFloat(b.star)
			})
			this.nav_0 = true
			this.nav_1 = false
			this.nav_2 = false
			this.nav_3 = false
			this.showFilterMask = false
			this.nearByData = data
		},
		sortByDeliveryTime() {
			// 配送时间
			let data = this.nearByData
			data = data.sort(function(a, b) {
				return parseFloat(a.delivery_time) - parseFloat(b.delivery_time)
			})
			this.nav_0 = false
			this.nav_1 = false
			this.nav_2 = true
			this.nav_3 = false
			this.nearByData = data
		},
		sortByDistance() {
			// 离我最近
			let data = this.nearByData
			data = data.sort(function(a, b) {
				return parseFloat(a.range) - parseFloat(b.range)
			})
			this.nav_0 = false
			this.nav_1 = true
			this.nav_2 = false
			this.nav_3 = false
			this.nearByData = data
		},
		showFilterMaskFn(num) {
			// uni.pageScrollTo({
			// 	scrollTop: 0,
			// 	duration: 100,
			// })
			if (num) {
				this.mZhongHe = false
				this.nav_0 = false
				this.nav_3 = true
			} else {
				this.mZhongHe = true
				this.nav_0 = true
				this.nav_3 = false
			}
			this.nav_1 = false
			this.nav_2 = false
			this.showFilterMask = true
		}
	}
}
</script>

<style lang="scss">
@import '../take-out/takeout.scss';
@import './meishi.scss';
</style>
